import React, {PureComponent} from 'react';
import {Icon, message, Modal, Upload} from 'antd';

const { Dragger } = Upload;

const props = {
  name: 'file',
  multiple: false,
  action: '/api/v1/fileManage/uploadFile',
  headers:{Authorization: sessionStorage.getItem("JWT-TOKEN")}
};

export default class MenuModal extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {};
  }


  handleOk = () => {
    const {form, handleSave} = this.props;
    form.validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      handleSave(values, form);
    })
  };

  onChange = (info) => {
    const {handleModalCancel} = this.props;
    const {status} = info.file;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} 文件上传成功.`);
      handleModalCancel(true);
    } else if (status === 'error') {
      message.error(`${info.file.name} 文件上传失败.`);
    }
  };


  render() {
    const {modalVisible, handleModalCancel} = this.props;

    return (
      <div>
        <Modal
          visible={modalVisible}
          onCancel={()=>handleModalCancel()}
          footer={null}
          closable={false}
        >
          <Dragger {...props} onChange={this.onChange}>
            <p className="ant-upload-drag-icon">
              <Icon type="inbox" />
            </p>
            <p className="ant-upload-text">单击或拖动文件到此区域</p>
          </Dragger>
        </Modal>
      </div>
    );
  }
}
